<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        background-color: pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div></div>
    <!-- 页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，具体表现如下图：
 1）要求双位显示，例如：九点九分九秒，显示为09:09:09 -->
    <script>
      // 做定时操作
      getTime();
      setInterval(getTime, 1000);
      function getTime() {
        var box = document.querySelector("div");
        // 获取现在的年月日
        var nowtime = new Date();
        //   console.log(nowtime);
        var year = nowtime.getFullYear();
        var month = nowtime.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        var day = nowtime.getDate(); //获取天
        day = day < 10 ? "0" + day : day;

        var date = nowtime.getDay(); //获取星期
        var hour = nowtime.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = nowtime.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = nowtime.getSeconds();
        second = second < 10 ? "0" + second : second;
        var xingqi = [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期七",
        ];
        var times = `${year}年${month}月${day}日${
          xingqi[date - 1]
        }${hour}:${minute}:${second}`;
        box.innerHTML = times;
      }
    </script>
  </body>
</html>
